<template>
	<view class="w-100">
		<view class="mt-2 flex-1 mx-3">
			<view class="row-ac py-4 border-bottom">
				<view class="label-width">头像</view>
				<view class="row-ac">
					<view class="head-image mr-2" @click="headImageUpload">
						<image :src="form.head_image" mode=""></image>
					</view>
				</view>
			</view>
			<view class="row-ac py-4 border-bottom">
				<view class="label-width">用户名</view>
				<view class="ml-2">
					<input class="custom-input" v-model="form.username" placeholder="用户名" />
				</view>
			</view>
			<view class="row-ac py-4 border-bottom">
				<view class="label-width">昵称</view>
				<view class="ml-2">
					<input class="custom-input" v-model="form.nickname" placeholder="昵称" />
				</view>
			</view>
			<view class="row-ac py-4 border-bottom">
				<view class="label-width">邮箱</view>
				<view class="ml-2">
					<input class="custom-input" v-model="form.email" placeholder="邮箱" />
				</view>
			</view>
			<view class="row-ac py-4 border-bottom">
				<view class="label-width">手机号</view>
				<view class="ml-2">
					<input class="custom-input" v-model="form.phone" placeholder="手机号" />
				</view>
			</view>
			<!-- <view class="row-ac py-4 border-bottom">
				<view class="label-width">性别</view>
				<view class="ml-2">
					<label class="radio">
						<radio :value="0" v-model="form.sex" />男
					</label>
					<label class="radio">
						<radio :value="1" v-model="form.sex" />女
					</label>
				</view>
			</view> -->
			<view class="row-ac py-4 border-bottom">
				<view class="label-width">年龄</view>
				<view class="ml-2">
					<input class="custom-input" v-model="form.age" placeholder="年龄" />
				</view>
			</view>
			<view class="flex-1 row mt-9" @click="userPatch">
				<view class="update-button row">更新</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userInfoUrl,
		imagesUploadUrl,
		userPatchUrl
	} from '@/api/index.js'
	import request from '@/utils/request'
	export default {
		data() {
			return {
				form: {
					head_image: '',
					username: '',
					nickname:'',
					email: '',
					password: '',
					phone: '',
					sex: '',
					age: ''
				},
				userId: ''
			}
		},
		filters: {
			sexFilter(val) {
				if (val === 0) {
					return '男'
				} else if (val === 1) {
					return '女'
				}
			},
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				this.token = uni.getStorageSync('token')
				if (this.token != '') {
					this.loginStatus = true
					this.getUserInfo()
				} else {
					this.loginStatus = false
				}
			},
			getUserInfo() {
				this.$R.get(userInfoUrl).then(res => {
					this.userId = res.data.id
					this.form = {
						head_image: res.data.head_image,
						username: res.data.username,
						nickname: res.data.nickname,
						email: res.data.email,
						password: res.data.password,
						phone: res.data.phone,
						sex: res.data.sex,
						age: res.data.age
					}
				})
			},
			userPatch() {
				this.$R.patch(userPatchUrl + this.userId + '/', this.form).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '更新成功'
						});
					}
				})
			},
			headImageUpload() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: request.baseUrl + imagesUploadUrl,
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'Authorization': 'Bearer ' + uni.getStorageSync('token')
							},
							success: (uploadRes) => {
								const data = JSON.parse(uploadRes.data);
								if (data.code === 200) {
									const url = data.data.url;
									this.form.head_image = url
								} else {
									console.error('上传失败');
								}
							},
							fail: (error) => {
								console.error('上传失败', error);
							}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.head-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 2rpx solid #E4E4E4;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}

	.update-button {
		width: 299rpx;
		height: 82rpx;
		border-radius: 2.5rem;
		background-color: #E45825;
		color: #fff;
	}

	.label-width {
		width: 120rpx;
	}

	.custom-input {
		background-color: #F4F4F4;
		padding: 15rpx;
		border-radius: 6rpx;
	}
</style>